<template>
  <div class="home">
    <!-- 首页顶部搜索栏 -->
    <van-search v-model="searchVal"
                shape="round"
                placeholder="请输入搜索关键词"
                disabled
                @click="$router.push('/home/sarchPopup')" />
    <!-- 首页banner轮播图 -->
    <van-swipe class="my-swipe"
               :autoplay="3000"
               indicator-color="#1989fa">
      <van-swipe-item v-for="item in banner"
                      :key="item.id">
        <img :src="item.image_url"
             alt=""
             width="100%">
      </van-swipe-item>
    </van-swipe>
    <!-- 搜索弹层动画 -->
    <!-- 右滑进入 -->
    <transition name="van-slide-right">
      <!-- 二级路由挂载点 -->
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

import { GetHomeData } from "@/request/api"
export default {
  name: 'Home',
  data () {
    return {
      searchVal: "",
      banner: [],

    }
  },
  created () {
    GetHomeData()
      .then(res => {  // then的res 接收的是 响应拦截器中返回的值
        // this.banner = res.data.banner
        // res.data
        let { banner } = res.data;
        this.banner = banner

      }).catch(err => {
        console.log(err);
      })
  },
  methods: {
  },
  components: {

  }
}
</script>
<style lang="less" scoped>
// slide是transition的类名
// .slide-enter,
// .slide-leave-to {
//   // 过渡开始之前的样式
//   right: -100%;
// }
// .slide-enter-active,
// .slide-leave-active {
//   // 过渡属性
//   transition: right 0.3s;
// }
// .slide-enter-to,
// .slide-leave {
//   // 过渡结束之后的样式
//   right: 0;
// }
</style>
